.container {
    margin: 50px 0 0 500px;
}

.cat {
    position: relative;
}

.cat .face {
    position: relative;
    z-index: 2;
}

.cat .head {
    position: relative;
    width: 320px;
    height: 300px;
    border-radius: 150px;
    background: #07bbee;
    background: -webkit-radial-gradient(right top, #fff 10%, #07bbee 20%, #10a6ce 75%, #000);
    background: -moz-radial-gradient(right top, #fff 10%, #07bbee 20%, #10a6ce 75%, #000);
    background: -ms-radial-gradient(right top, #fff 10%, #07bbee 20%, #10a6ce 75%, #000);
    border: 2px solid #555;
    box-shadow: -5px 10px 15px rgba(0, 0, 0, 0.45);
}

.cat .face .white {
    width: 265px;
    /*设置宽高*/
    height: 195px;
    border-radius: 150px;
    position: absolute;
    /*进行绝对定位*/
    top: 75px;
    left: 25px;
    background: #fff;
    /*此放射渐变也是使脸的左下角暗一些，看上去更真实*/
    background: -webkit-radial-gradient(right top, #fff 75%, #eee 80%, #999 90%, #444);
    background: -moz-radial-gradient(right top, #fff 75%, #eee 80%, #999 90%, #444);
    background: –ms-radial-gradient(right top, #fff 75%, #eee 80%, #999 90%, #444);
}

.cat .face .nose {
    width: 30px;
    height: 30px;
    border-radius: 15px;
    background: #c93300;
    border: 2px solid #000;
    position: absolute;
    top: 110px;
    left: 140px;
    z-index: 3;
    /*鼻子在白色脸底下面*/
}

.cat .face .nose .light {
    width: 10px;
    height: 10px;
    border-radius: 5px;
    box-shadow: 19px 8px 5px #fff;
    /*通过阴影实现高光*/
}


/*鼻子下的线*/

.cat .face .nose_line {
    width: 3px;
    height: 100px;
    background: #333;
    position: absolute;
    top: 143px;
    left: 155px;
    z-index: 3;
}

.cat .eyes {
    position: relative;
    z-index: 3;
    /*眼睛在白色脸底下面*/
}


/*眼睛共同的样式*/

.cat .eyes .eye {
    width: 72px;
    height: 82px;
    background: #fff;
    border: 2px solid #000;
    border-radius: 35px 35px;
    position: absolute;
    top: 40px;
}

.cat .eyes .eye .black {
    width: 14px;
    height: 14px;
    background: #000;
    border-radius: 7px;
    position: absolute;
    top: 40px;
}

.cat .eyes .left {
    left: 82px;
}

.cat .eyes .right {
    left: 156px;
}

.cat .eyes .eye .bleft {
    left: 50px;
}

.cat .eyes .eye .bright {
    left: 7px;
}


/*嘴巴*/

.cat .face .mouth {
    width: 220px;
    height: 400px;
    /*通过底边框加上圆角模拟微笑嘴巴*/
    border-bottom: 3px solid #333;
    border-radius: 120px;
    position: absolute;
    top: -160px;
    left: 45px;
}

.cat .whiskers {
    width: 220px;
    height: 80px;
    background: #fff;
    border-radius: 15px;
    position: absolute;
    top: 120px;
    left: 45px;
    z-index: 2;
    /*在鼻子和眼睛下面*/
}


/*所有胡子的公用样式*/

.cat .whiskers .whisker {
    width: 60px;
    height: 2px;
    background: #333;
    position: absolute;
    z-index: 2;
}


/*右上胡子*/

.cat .whiskers .rTop {
    left: 165px;
    top: 25px;
}


/*右中胡子*/

.cat .whiskers .rMiddle {
    left: 167px;
    top: 45px;
}


/*右下胡子*/

.cat .whiskers .rBottom {
    left: 165px;
    top: 65px;
}


/*左上胡子*/

.cat .whiskers .lTop {
    left: 0;
    top: 25px;
}


/*左中胡子*/

.cat .whiskers .lMiddle {
    left: -2px;
    top: 45px;
}


/*左下胡子*/

.cat .whiskers .lBottom {
    left: 0;
    top: 65px;
}


/*胡子旋转角度*/

.cat .whiskers .r160 {
    -webkit-transform: rotate(160deg);
    -moz-transform: rotate(160deg);
    -ms-transform: rotate(160deg);
    -o-transform: rotate(160deg);
    transform: rotate(160deg);
}

.cat .whiskers .r20 {
    -webkit-transform: rotate(200deg);
    -moz-transform: rotate(200deg);
    -ms-transform: rotate(200deg);
    -o-transform: rotate(200deg);
    transform: rotate(200deg);
}


/*围脖*/

.cat .choker {
    width: 230px;
    height: 20px;
    background: #c40;
    /*线性渐变 让围巾看上去更自然*/
    background: -webkit-gradient(linear, left top, left bottom, from(#c40), to(#800400));
    background: -moz-linear-gradient(center top, #c40, #800400);
    background: -ms-linear-gradient(center top, #c40, #800400);
    border: 2px solid #000;
    border-radius: 10px;
    position: relative;
    top: -40px;
    left: 45px;
    z-index: 4;
}


/*铃铛*/

.cat .choker .bell {
    width: 40px;
    height: 40px;
    _overflow: hidden;
    /*IE6 hack*/
    border: 2px solid #000;
    border-radius: 50px;
    background: #f9f12a;
    background: -webkit-gradient(linear, left top, left bottom, from(#f9f12a), color-stop(0.5, #e9e11a), to(#a9a100));
    background: -moz-linear-gradient(top, #f9f12a, #e9e11a 75%, #a9a100);
    background: -ms-linear-gradient(top, #f9f12a, #e9e11a 75%, #a9a100);
    box-shadow: -5px 5px 10px rgba(0, 0, 0, 0.25);
    position: absolute;
    top: 5px;
    left: 90px;
}


/*双横线*/

.cat .choker .bell_line {
    width: 36px;
    height: 2px;
    background: #f9f12a;
    border: 2px solid #333;
    border-radius: 3px 3px 0 0;
    position: absolute;
    top: 10px;
}


/*黑点*/

.cat .choker .bell_circle {
    width: 12px;
    height: 10px;
    background: #000;
    border-radius: 5px;
    position: absolute;
    top: 20px;
    left: 14px;
}


/*黑点下的线*/

.cat .choker .bell_under {
    width: 3px;
    height: 15px;
    background: #000;
    position: absolute;
    left: 18px;
    top: 27px;
}


/*铃铛高光*/

.cat .choker .bell_light {
    width: 12px;
    height: 12px;
    border-radius: 10px;
    box-shadow: 19px 8px 5px #fff;
    position: absolute;
    top: -5px;
    left: 5px;
    opacity: 0.7;
}


/*身子*/

.cat .bodys {
    position: relative;
    top: -310px;
}


/*肚子*/

.cat .bodys .body {
    width: 220px;
    height: 165px;
    background: #07beea;
    background: -webkit-gradient(linear, right top, left top, from(#07beea), color-stop(0.5, #0073b3), color-stop(0.75, #00b0e0), to(#0096be));
    background: -moz-linear-gradient(right center, #07beea, #0073b3 50%, #00b0e0 75%, #0096be 100%);
    background: -ms-linear-gradient(right center, #07beea, #0073b3 50%, #00b0e0 75%, #0096be 100%);
    border: 2px solid #333;
    position: absolute;
    top: 265px;
    left: 50px;
}


/*白色肚兜*/

.cat .bodys .wraps {
    width: 170px;
    height: 170px;
    background: #fff;
    background: -webkit-gradient(linear, right top, left bottom, from(#fff), color-stop(0.75, #fff), color-stop(0.83, #eee), color-stop(0.90, #999), color-stop(0.95, #444), to(#000));
    background: -moz-linear-gradient(right top, #fff, #fff 75%, #eee 83%, #999 90%, #444 95%, #000);
    background: -ms-linear-gradient(right top, #fff, #fff 75%, #eee 83%, #999 90%, #444 95%, #000);
    border: 2px solid #000;
    border-radius: 85px;
    position: absolute;
    left: 72px;
    top: 230px;
}


/*口袋*/

.cat .bodys .pocket {
    width: 130px;
    height: 130px;
    border-radius: 65px;
    background: #fff;
    background: -webkit-gradient(linear, right top, left bottom, from(#fff), color-stop(0.70, #fff), color-stop(0.75, #f8f8f8), color-stop(0.80, #eee), color-stop(0.88, #ddd), to(#fff));
    background: -moz-linear-gradient(right top, #fff, #fff 70%, #f8f8f8 75%, #eee 80%, #ddd 88%, #fff);
    background: -ms-linear-gradient(right top, #fff, #fff 70%, #f8f8f8 75%, #eee 80%, #ddd 88%, #fff);
    border: 2px solid #000;
    position: absolute;
    top: 250px;
    left: 92px;
}


/*挡住口袋一半*/

.cat .bodys .pocket_mask {
    width: 134px;
    height: 60px;
    background: #fff;
    border-bottom: 2px solid #000;
    position: absolute;
    top: 259px;
    left: 92px;
}


/*左右手*/

.cat .hand_right,
.cat .hand_left {
    height: 100px;
    width: 100px;
    position: absolute;
    top: 272px;
    left: 248px;
}


/*左手*/

.cat .hand_left {
    left: -10px;
}


/*手臂公共部分*/

.cat .arm {
    width: 80px;
    height: 50px;
    background: #07beea;
    background: -webkit-gradient(linear, left top, left bottom, from(#07beea), color-stop(0.85, #07beea), to(#555));
    background: -moz-linear-gradient(center top, #07BEEA, #07BEEA 85%, #555);
    background: -ms-linear-gradient(center top, #07BEEA, #07BEEA 85%, #555);
    border: 1px solid #000000;
    box-shadow: -10px 7px 10px rgba(0, 0, 0, 0.35);
    z-index: -1;
    position: relative;
}


/*右手手臂*/

.cat .hand_right .arm {
    top: 17px;
    -webkit-transform: rotate(35deg);
    -moz-transform: rotate(35deg);
    -ms-transform: rotate(35deg);
    -o-transform: rotate(35deg);
    transform: rotate(35deg);
}


/*左手手臂*/

.cat .hand_left .arm {
    top: 17px;
    background: #0096be;
    /*背光一面使用纯色，使其有立体感*/
    box-shadow: 5px -7px 10px rgba(0, 0, 0, 0.25);
    -webkit-transform: rotate(145deg);
    -moz-transform: rotate(145deg);
    -ms-transform: rotate(145deg);
    -o-transform: rotate(145deg);
    transform: rotate(145deg);
}


/*圆形手掌公共部分*/

.cat .circle {
    width: 60px;
    height: 60px;
    border-radius: 30px;
    border: 2px solid #000;
    background: #fff;
    background: -webkit-gradient(linear, right top, left bottom, from(#fff), color-stop(0.5, #fff), color-stop(0.70, #eee), color-stop(0.8, #ddd), to(#999));
    background: -moz-linear-gradient(right top, #fff, #fff 50%, #eee 70%, #ddd 80%, #999);
    background: -ms-linear-gradient(right top, #fff, #fff 50%, #eee 70%, #ddd 80%, #999);
    position: absolute;
}


/*右手手掌*/

.cat .hand_right .circle {
    left: 40px;
    top: 32px;
}


/*左手手掌*/

.cat .hand_left .circle {
    left: -20px;
    top: 32px;
}


/*手臂和身体结合处，使用背景遮住边框*/

.cat .arm_rewrite {
    height: 45px;
    width: 5px;
    background: #07beea;
    position: relative;
}


/*右手结合处*/

.cat .hand_right .arm_rewrite {
    top: -45px;
    left: 22px;
}


/*左手结合处*/

.cat .hand_left .arm_rewrite {
    top: -45px;
    left: 60px;
    background: #0096be;
    /*同理，背光一面使用纯色，使其有立体感*/
}


/*脚部*/

.cat .foot {
    width: 280px;
    height: 40px;
    position: relative;
    top: 55px;
    left: 20px;
}


/*左右脚共同样式*/

.cat .foot .left,
.cat .foot .right {
    width: 125px;
    height: 30px;
    background: #fff;
    background: -webkit-gradient(linear, right top, left bottom, from(#fff), color-stop(0.75, #fff), color-stop(0.85, #eee), to(#999));
    background: -moz-linear-gradient(right top, #fff, #fff 75%, #eee 85%, #999);
    background: -ms-linear-gradient(right top, #fff, #fff 75%, #eee 85%, #999);
    border: 2px solid #333;
    border-radius: 80px 60px 60px 40px;
    box-shadow: -6px 0 10px rgba(0, 0, 0, 0.35);
    position: relative;
}

.cat .foot .left {
    left: 8px;
    top: 65px;
}

.cat .foot .right {
    top: 31px;
    left: 141px;
}


/*双脚之间的缝隙，加阴影使用立体感*/

.cat .foot .foot_rewrite {
    width: 20px;
    height: 10px;
    background: #fff;
    background: -webkit-gradient(linear, right top, left bottom, from(#666), color-stop(0.83, #fff), to(#fff));
    background: -moz-linear-gradient(right top, #666, #fff 83%, #fff);
    background: -ms-linear-gradient(right top, #666, #fff 83%, #fff);
    /*制作半圆效果*/
    border: 2px solid #000;
    border-bottom: none;
    border-radius: 40px 40px 0 0;
    position: relative;
    top: -11px;
    left: 130px;
    _left: 127px;
}


/*眼珠*/

.cat .eyes .eye .black {
    width: 14px;
    height: 14px;
    background: #000;
    border-radius: 7px;
    position: absolute;
    top: 40px;
    -webkit-animation: eyemove 3s linear infinite;
    -moz-animation: eyemove 3s linear infinite;
    -ms-animation: eyemove 3s linear infinite;
    -o-animation: eyemove 3s linear infinite;
    animation: eyemove 3s linear infinite;
}


/*让眼睛动起来*/

@-webkit-keyframes eyemove {
    70% {
        margin: 0 0 0 0;
    }
    80% {
        margin: -22px 0 0 0;
    }
    85% {
        margin: -22px 0 0 5px;
    }
    90% {
        margin: -22px 10px 0 0;
    }
    93% {
        margin: -22px 0 0 0;
    }
    96% {
        margin: 0 0 0 0;
    }
}

@-moz-keyframes eyemove {
    70% {
        margin: 0 0 0 0;
    }
    80% {
        margin: -22px 0 0 0;
    }
    85% {
        margin: -22px 0 0 5px;
    }
    90% {
        margin: -22px 10px 0 0;
    }
    93% {
        margin: -22px 0 0 0;
    }
    96% {
        margin: 0 0 0 0;
    }
}

@-o-keyframes eyemove {
    70% {
        margin: 0 0 0 0;
    }
    80% {
        margin: -22px 0 0 0;
    }
    85% {
        margin: -22px 0 0 5px;
    }
    90% {
        margin: -22px 10px 0 0;
    }
    93% {
        margin: -22px 0 0 0;
    }
    96% {
        margin: 0 0 0 0;
    }
}

@keyframes eyemove {
    70% {
        margin: 0 0 0 0;
    }
    80% {
        margin: -22px 0 0 0;
    }
    85% {
        margin: -22px 0 0 5px;
    }
    90% {
        margin: -22px 10px 0 0;
    }
    93% {
        margin: -22px 0 0 0;
    }
    96% {
        margin: 0 0 0 0;
    }
}
